<template>
    <!-- Dashboard -->
    <div class="page-container">
      <el-form :inline="true" label-width="100px" label-suffix=":">
        <el-row>
          <el-col :span="6">
            <el-form-item label="道路名称">
              <el-input v-model="formData.roadName" placeholder="请输入道路名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="管制时间">
              <el-date-picker
                v-model="formData.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="{
                  disabledDate: (time) => {
                    const endDate = new Date(this.formData.dateRange[1]);
                    return time.getTime() > endDate.getTime();
                  }
                }"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <!-- 查询按钮 -->
          <el-col :span="6">
            <el-button type="primary" icon="el-icon-search" @click="fetchData">查询</el-button>
            <el-button plain icon="el-icon-refresh" @click="resetForm">重置</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="$refs.mDialog.open()">新增</el-button>
          </el-col>
        </el-row>
      </el-form>
      <div stylle="height: calc(100vh - 160px)" v-loading="listLoading"> 
        <el-table
          :data="list"
          border
          fit
          highlight-current-row
          style="height: 500px"
        >
          <el-table-column align="center" label="道路名称" prop="roadName"></el-table-column>
          <el-table-column align="center" label="管制原因" prop="controlReason"></el-table-column>
          <el-table-column align="center" label="开始时间" prop="startTime"></el-table-column>
          <el-table-column align="center" label="结束时间" prop="endTime"></el-table-column>
          <el-table-column align="center" label="发布者" prop="publisherName"></el-table-column>
          <el-table-column align="center" label="操作" width="150">
            <template slot-scope="scope">
              <!-- 删除 -->
               <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top: 20px; text-align: center">
        <!-- 页码改变和页数改变事件 -->
        <el-pagination
          v-show="list"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
          :current-page="pageInfo.currentPage"
          :page-sizes="[10, 20, 30, 40, 50]"
          style="float: right"
          @current-change="currentPageChange"
          @size-change="sizeChange"
        />
      </div>
  
      <m-dialog ref="mDialog" @refreshIntersectionData="fetchData"></m-dialog>
    </div>
  </template>
  
  <script>
  import { mapGetters } from "vuex";
  import { getTmTrafficControlPage, deleteTmTrafficControl } from "@/api/tm-road";
  import mDialog from "./components/dialogIntersection.vue";
  
  export default {
    name: "Dashboard",
    computed: {
      ...mapGetters(["name"]),
    },
    components: {
      mDialog
    },
    filters: {
      // 道路类型# 0'主干路', 1'次干路',2 '支路',3 '区间路'
      filterRoadType(value) {
        const roadType = ['主干路', '次干路', '支路', '区间路']
        return roadType[value]
      }
    },
    data() {
      return {
        formData: {
          dateRange: [],
          roadName: null
        },
        listLoading: false,
        list: [
        ], // 列表数据
        pageInfo: {
          total: 0,
          currentPage: 1,
          pageSize: 10,
        },
      };
    },
    mounted() {
      this.fetchData()
    },
    methods: {
      // 获取列表数据
      async fetchData() {
        this.listLoading = true;
        const [ startTime = null, endTime = null ] = this.formData.dateRange;
        const params = {
          pageNum: this.pageInfo.currentPage,
          pageSize: this.pageInfo.pageSize,
          startTime,
          endTime,
          roadName: this.formData.roadName,
        }
        const { code = undefined, items = {} } = await getTmTrafficControlPage({ ...params })
        if(code ===200){
          this.list = items.records;
          this.pageInfo.total = items.total
          setTimeout(() => {
            this.listLoading = false
          }, 200)
        }else{
          this.$message.error('获取数据失败')
          this.listLoading = false
        }
      },
      // 重置表单
      resetForm() {
        this.formData = {
          dateRange: [],
          roadName: null
        };
        this.fetchData() 
      },
      // 页码改变事件
      currentPageChange(currentPage) {
        this.pageInfo.currentPage = currentPage;
        this.fetchData()
      },
      // 页数改变事件
      sizeChange(pageSize) {
        this.pageInfo.pageSize = pageSize;
        this.fetchData()
      },
      handleDelete (index, row) {
        this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteTmTrafficControl({ id: row.id }).then(res => {
            if (res.code === 200) {
              this.$message.success('删除成功')
              this.fetchData()
            } else {
              this.$message.error('删除失败')
            }
          })
        }).catch(() => {
        })
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  p {
      margin: 0;
      padding: 0;
  }
  #clock {
      font-family: 'Share Tech Mono', monospace;
      color: #ffffff;
      text-align: center;
      color: #3F9EFF;
      text-shadow: 0 0 3px yellow;
      .time {
          letter-spacing: 0.05em;
          font-size: 20px;
          padding: 5px 0;
      }
      .date {
          letter-spacing: 0.1em;
          font-size: 18px;
      }
      .text {
          letter-spacing: 0.1em;
          font-size: 12px;
          padding: 20px 0 0;
      }
  }
  </style>
  